<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onmousemove</title>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: yellow;}
        .content{width: 200px;height: 200px;background-color: aqua;}
        .box{width: 100px;height: 100px;background-color: aqua;position: absolute;top: 100px;left: 100px;}
    </style>
</head>
<body>
    <div style="width: 100px;height: 100px;background-color: brown;position: absolute;top: 10px;left: 10px;"></div>
    <div class="box"></div>
    <script>
        var div = document.getElementsByTagName("div")[0];
        var box = document.getElementsByClassName("box")[0];
        // document.onmousemove = function (e) {
        //     var event = e || window.event;
        //     div.style.left = e.pageX + "px";
        //     div.style.top = e.pageY + "px";
        // }
        var disX,
            disY;
        div.onmousedown = function (e) {
            disX = e.pageX - parseInt(div.style.left);
            disY = e.pageY - parseInt(div.style.top);
            document.onmousemove = function (e) {
                var event = e || window.event;
                div.style.left = e.pageX - disX + "px";
                div.style.top = e.pageY - disY + "px";
            };
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        };



        // function drag(elem) {
        //     var disX,
        //         disY;
        //     elem.onmousedown = function (e){
        //         disX = e.pageX - parseInt(elem.style.left);
        //         disY = e.pageY - parseInt(elem.style.top);
        //         document.onmousemove = function (e) {
        //             var event = e || window.event;
        //             elem.style.left = e.pageX - disX + "px";
        //             elem.style.top = e.pageY - disY + "px";
        //         };
        //         document.onmouseup = function () {
        //             document.onmousemove = null;
        //         }
        //     };
        // }
        // drag(box);

    </script>
</body>
</html>
